<template>
	<view class="content">
		<view class="address-container">
			<view style="display: flex;align-items: center;margin: 20rpx;">
				<!-- 	<image class="address-icon" src="../../../static/images/address.png"></image> -->
				<text style="font-weight: bold;">{{ detailInfo.receiver }}</text>
				<text style="font-weight: bold;">{{ detailInfo.receiverPhone }}</text>
			</view>
			<view style="color: #999;margin-left: 20rpx;" >{{ detailInfo.receiverAddress }}</view>
		</view>
		<view class="goods-container">
			<view class="goods-item" v-for="(child, index) in detailInfo.mallProductOrderItemList" :key="index">
				<image class="goods-item-img" :src="child.productImg"></image>
				<view style="margin-left: 20rpx;">
					<view>{{ child.productName }}</view>
					<view style="margin-top: 20rpx;color: #999;">数量：{{ child.num }}</view>
					<view style="margin-top: 20rpx;font-weight: bold;">¥{{ child.productPrice | moneyFormat(2) }}</view>
				</view>
			</view>
		</view>
		<view class="order-container">
			<view class="order-container-item">
				<view class="order-container-item-title">订单编号：</view>
				<view class="order-container-item-content">{{ detailInfo.orderNo }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">订单状态：</view>
				<view class="order-container-item-content">
					<view v-if="detailInfo.status != 40">
					<!-- 	<view v-if="detailInfo.DeliveryModel == 10">
							<view v-if="detailInfo.Status == 20">备货中</view>
							<view v-else-if="detailInfo.Status == 30">待领取</view>
							<view v-else>{{ detailInfo.StatusText }}</view>
						</view> -->
						<view >{{ detailInfo.statusName }}</view>
					</view>
					<view v-else>{{ detailInfo.statusName }}</view>
				</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">下单时间：</view>
				<view class="order-container-item-content">{{ detailInfo.createTime }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">支付方式：</view>
				<view class="order-container-item-content">{{ detailInfo.payTypeName }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">支付时间：</view>
				<view class="order-container-item-content">{{ detailInfo.createTime }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">收货方式：</view>
				<view class="order-container-item-content">{{ detailInfo.deliveryType==1?'快递':'自提' }}</view>
			</view>
			<view class="order-container-item" v-if="detailInfo.Status >= 30  && detailInfo.deliveryType == 1">
				<view class="order-container-item-title">快递公司：</view>
				<view class="order-container-item-content">{{ detailInfo.expressCompany }}</view>
			</view>
			<view class="order-container-item" v-if="detailInfo.status >= 30  && detailInfo.deliveryType == 1">
				<view class="order-container-item-title">快递单号：</view>
				<view class="order-container-item-content">{{ detailInfo.expressNo }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">买家留言：</view>
				<view class="order-container-item-content">{{ detailInfo.remark }}</view>
			</view>
		</view>
		<view class="order-container" style="margin-bottom: 80rpx;">
			<view class="order-container-item" v-if="!detailInfo.IsVirtual">
				<view class="order-container-item-title">运费：</view>
				<view class="order-container-item-content real-price">￥{{ detailInfo.expressPrice | moneyFormat(2) }}</view>
			</view>
			<view class="order-container-item">
				<view class="order-container-item-title">订单总额：</view>
				<view class="order-container-item-content real-price">￥{{ detailInfo.totalPrice | moneyFormat(2) }}</view>
			</view>
		</view>
		<view class="bottom-view">
			<view
				class="order-btn zhifu-btn margin-right-20"
				style="margin-left:auto"
				v-if="detailInfo.status == 1"
				@click.stop="gopayorder(detailInfo.orderNo, detailInfo.totalPrice)"
			>
				去支付
			</view>
			<view class="order-btn pinglun-btn margin-right-20" style="margin-left:auto" v-if="detailInfo.status == 3" @click.stop="updateOrderStatus(detailInfo.orderNo, 40)">
				确认收货
			</view>
			<view class="order-btn quxiao-btn" v-if="item.status == 1" @click.stop="updateOrderStatus(detailInfo.orderNo, -10)">取消订单</view>
		</view>
	</view>
</template>

<script>
import { formatDate, null2str, successToShow } from '@/config/common.js';
import { getAppStoreOrderDetail, updateStoreOrderStatus,orderCancel } from '@/constant/mall.js';

export default {
	data() {
		return {
			detailInfo: {}
		};
	},
	created() {},
	onLoad(options) {
		console.log(options.orderNo)
		if (options.orderNo) {
			this.orderNo = options.orderNo;
			this.getOrderDetail();
		}
	},
	methods: {
		async gopayorder(orderNo, orderAmount) {
			//支付
			uni.navigateTo({
				url: '/pages/payorder/index?orderNo=' + orderNo + '&orderType=30' + '&orderAmount=' + orderAmount
			});
		},
		async getOrderDetail() {
			let result = await getAppStoreOrderDetail({ orderNo: this.orderNo });
			this.detailInfo = result.data;
			this.detailInfo = null2str(this.detailInfo);
		},
		async updateOrderStatus(orderId, orderStatus) {
			if(orderStatus==-10){
				await orderCancel({
				orderNo: orderId,
				type: 4
				});
			}else{
				// 确认收货
			}
			let orderStatusName= orderStatus == -10 ? '取消成功' : '确认成功'
			successToShow(orderStatusName, res => {
				uni.navigateBack({
					url: './list'
				});
			});
		}
	}
};
</script>
<style>
@import url('../../../css/common.css');
</style>
<style lang="scss" scoped>
.content {
	background-color: #f0eff4;
	height: 100vh;
	font-size: 28rpx;
	overflow-y: auto;
	padding-bottom: 140rpx;
}
.order-container {
	margin: 20rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	background-color: #fff;
	border-radius: 8rpx;
	&-item {
		margin: 20rpx;
		display: flex;
		&-title {
			font-size: 28rpx;
			width: 150rpx;
		}
		&-content {
			font-size: 28rpx;
			font-weight: bold;
		}
	}
}
.price {
	width: 500rpx;
	text-align: right;
	font-size: 28rpx;
}
.real-price {
	color: $main-text-color-main-orange;
	font-size: 34rpx;
	width: 500rpx;
	text-align: right;
}
.address-container {
	font-size: 28rpx;
	border-radius: 8rpx;
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	.address-icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
}
.goods-container {
	padding: 20rpx;
	border-radius: 8rpx;
	background-color: #fff;
	margin: 20rpx;

	.goods-item {
		font-size: 28rpx;
		display: flex;
		margin: 20rpx;
		&-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 8rpx;
		}
	}
}

.bottom-view:empty {
	display: none;
}
</style>
